<template>
  <div class="scanpicture">
    <div class="scanpicture-url">
      <img :src="image_url" class="full" />
      <div class="frame frame-top"></div>
      <div class="frame frame-right"></div>
      <div class="frame frame-bottom"></div>
      <div class="frame frame-left"></div>
    </div>
    <van-sticky>
      <div class="scanpicture-pic-box">
        <div class="scanpicture-pic">
          <img :src="image_url" class="full" />
        </div>
        <van-icon name="arrow-left" class="arrow-left" @click.stop="goback" />
      </div>
      <div class="sort">
        <div class="sort-item sort-top">
          <div class="title">—— 为你找到以下类似商品 ——</div>
        </div>
        <c-sort :show="true" @sortIn="sortOut" @showscreen="showbox" text="搜索结果"></c-sort>
      </div>
    </van-sticky>
    <van-pull-refresh v-model="isLoading" @refresh="refreshData" success-text="刷新成功">
      <d-list @load="getMoreData" :finished="noMore" :loading="loading" :showStatusText="true">
        <yz-blank :datas="goods" text="暂无数据"></yz-blank>
        <c-goodsList :goods="goods" :goods_template="goods_template" text="搜索结果" class="osll" :loading="false">
        </c-goodsList>
      </d-list>
    </van-pull-refresh>
    <template v-if="show">
      <van-popup v-model="show" position="right" @touchMove.stop>
        <div class="screening">
          <span class="tabs" v-if="brand && brand.length > 0">{{ screentitle[0] }} </span>
          <div id="div1">
            <div v-for="(val, key) in brand" :key="key" @click="screenbrand(val.id)">
              <img :src="val.logo" />
              <span style="word-break: break-all;">{{ val.name }}</span>
            </div>
          </div>
          <span class="tabs">{{ screentitle[1] }} </span>
          <div id="div2">
            <van-collapse v-model="activeNames" accordion>
              <div v-for="(val, key) in classification1" :key="key" @click="classificationtype(val.id, key)">
                <van-collapse-item v-show="val.name" :title="val.name" :name="key" :is-link="val.son.length > 0" :icon="classificationkey == key ? 'passed' : ''">
                  <div class="classify">
                    <div v-for="(val1, key1) in val.son" :key="key1" class="divbox1" :class="{ m100: classificationkey1 == key1 }">
                      <p :class="{ chooseFir: classificationkey1 == key1 }" @click.stop="classificationtype1(val1.id, key1)" v-show="classificationkey1 == key1">
                        <span class="none-choose" :class="{ color1: classificationkey1 != key1 }">
                          <img class="img-box" src="../../../assets/images/current@3x.png" alt="" />
                        </span>
                        <span>{{ val1.name }}</span>
                      </p>

                      <p :class="{ chooseFir: classificationkey1 == key1 }" @click.stop="classificationtype1(val1.id, key1)" v-show="classificationkey1 == null">
                        <span>{{ val1.name }}</span>
                      </p>

                      <div class="box-second">
                        <div v-for="(val2, key2) in val1.has_many_children" :key="key2" @click.stop="classificationtype2(val2.id, key2)" v-show="classificationkey1 == key1" class="divbox2">
                          <p :class="{'choose-third': classificationkey2 == key2 }">
                            <span>{{ val2.name }}</span>
                            <span :class="{ color1: classificationkey2 != key2 }">
                            <img class="img-box2" src="../../../assets/images/cur@3x.png" alt="" /></span>
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </van-collapse-item>
              </div>
            </van-collapse>

          </div>
          <span class="tabs" v-if="attr && attr.length > 0">{{ screentitle[2] }} </span>
          <div id="div3">
            <p v-for="(val, key) in attr" :key="key" @click="selectattr(key, val)">
              <span class="title">{{ val.name }}</span>
              <span class="choose" v-if="val.show">
                <img class="img-box" src="../../../assets/images/current@3x.png" alt="" />
              </span>
            </p>
          </div>

          <span class="tabs" v-if="tagname && tagname.length > 0">{{ screentitle[3] }} </span>
          <div id="div4">
            <dl v-for="(val, key) in tagname" :key="key">
              <dt>
                {{ val.name }}
                <span @click="showtagname(key)" v-if="val.value.length > 2">{{ showtagnamekey != key ? "更多" : "收起" }}
                  <span class="icon" :class="{ icon1: showtagnamekey == key }"></span>
                </span>
              </dt>
              <dd :class="{ color2: showtagnamekey != key }" class="div4-dd">
                <span v-for="(val1, key1) in val.value" :key="key1" :class="{color:val1.change}" @click="selectname(val1,key1)">{{ val1.name }}</span>
              </dd>
            </dl>
          </div>
          <div class="button">
            <div class="btn" @click="resetnames">重置</div>
            <div class="btn" @click="screen">确定</div>
          </div>
        </div>
      </van-popup>
    </template>
  </div>
</template>
<script>
import DList from "components/dlist";
import yzBlank from "components/ui_components/yz_blank";
import cGoodsList from "components/goodsList";
import cSort from "components/sort";
let mixin = {
  data() {
    return {
      brand: {},
      show: false,
      brandId: "",
      screentitle: ["品牌", "分类", "属性", "高级选项"], //筛选标题
      activeNames: [],
      classification1: [],
      typestring:"",
      classificationkey:null,
      classificationkey1:null,
      classificationkey2:null,
      classificationshow:false,
      attrstr: [],
      attr:[
        {name: "推荐商品",show: false,val:"is_recommand"},
        {name: "新品上市",show: false,val:"is_new"},
        {name: "热卖商品",show: false,val:"is_hot"},
        {name: "促销商品",show: false,val:"is_discount"},
        {name: "限时抢购",show: false,val:"limit_buy"}
      ],
       tagname: [],
       showtagnamekey: null,
       filterId:[],
    }
  },
  created() {
    this.getbrand();
    this.getclassification();
    this.getname();
  },
  methods: {
    getbrand() {
      $http.post("goods.brand.get-brand").then(res => {
        this.brand = res.data.data;
      });
    },
    screenbrand(id) {
      this.brandId = id;
      this.refreshData();
      this.hidebox();
    },
    hidebox() {
      this.show = false;
    },
    //分类相关的功能
    getclassification() {
      $http.get("goods.category.search-goods-category").then(res => {
        this.classification1 = res.data;
      })
    },
   classificationtype(id, key) {
      this.typestring = id;

      if (this.classificationkey == key) {
        this.classificationkey = null;
        return;
      } else {
        this.classificationkey = key;
      }
      this.classificationkey1 = null;
      this.classificationkey2 = null;
      this.classificationshow = false;
    },
    classificationtype1(id, key) {
      this.typestring = id;
      this.classificationshow = true;

      if (this.classificationkey1 == key) {
        this.classificationkey1 = null;
      } else {
        this.classificationkey1 = key;
      }

      this.classificationkey2 = null;
    },
    classificationtype2(id, key) {
      if (this.typestring == id) {
        this.typestring = "";
      } else {
        this.typestring = id;
      }

      if (this.classificationkey2 == key) {
        this.classificationkey2 = null;
      } else {
        this.classificationkey2 = key;
      }
    },
    selectattr(key,val ) {
      if(!this.attrstr) this.attrstr = [];
      let i = this.attrstr.indexOf(val.val);
      i > -1 ? this.attrstr.splice(i,1) : this.attrstr.push(val.val);
      this.$set(val, "show", !val.show);
    },
    getname() {
      $http.get("goods.filtering.index").then(({data,result}) => {
          if (result == 1) {
            data = data || [];
            for (let i = 0; i < data.length; i++) {
              for (let y = 0; y < data[i].value.length; y++) {
                data[i].value[y].change = false;
              }
            }
            this.tagname = data;
          }
        })
    },
    //标签组相关功能
    showtagname(key) {
      if (key == this.showtagnamekey) {
        this.showtagnamekey = null;
      } else {
        this.showtagnamekey = key;
      }
    },
    selectname(val,i) {
      if(!this.filterId) this.filterId = [];
      let index = this.filterId.indexOf(val.id);
      index>-1?this.filterId.splice(index,1):this.filterId.push(val.id);
      this.$set(val,"change",!val.change);
    },
    screen(){
      this.refreshData();
      this.hidebox();
    },
    resetnames() {
      this.namestring = null;
      this.showtagnamekey = null;
      this.namekey = null;
      this.brandId = "";
      this.attrstr = [];
      this.filterId = [];
      this.brandId = "";
      this.typestring = "";
      this.classificationkey = null;
      this.classificationkey1 = null;
      this.classificationkey2 = null;
    },
  }
}
export default {
  components: { DList, yzBlank, cGoodsList, cSort },
  mixins: [mixin],
  data() {
    return {
      image_url: "",
      goods: [],
      page: 0,
      isLoading: false,
      loading: false,
      noMore: false,
      goods_template: {
        names: "02",
        type: "goodsList"
      },
      order_by: "",
      order_field: ""
    }
  },
  activated() {
    this.initData();
    let scanpictureUrl = window.localStorage.getItem("scanpicture-url");
    if (scanpictureUrl) this.getdata(scanpictureUrl);
    else this.goback();
  },
  methods: {
    goback(){
      this.$router.go(-1);
    },
    sortOut({ order_field, order_by }) {
      this.order_field = order_field;
      this.order_by = order_by;
      this.refreshData();
    },
    //通用功能
    showbox() {
      this.show = !this.show;
    },
    getJson(page) {
      let json = { image_url: this.image_url, page: page + 1, order_field:this.order_field, order_by:this.order_by };
      if (this.brandId) json["search[brand_id]"] = this.brandId;
      if(this.attrstr && this.attrstr.length > 0) json["search[product_attr]"] = this.attrstr.toString();
      if(this.filterId && this.filterId.length > 0) json["search[filtering]"] = this.filterId.toString();
      if(this.typestring) json["search[category]"] =  this.typestring;
      return json
    },
    initData() {
      this.page = 0;
      this.goods = [];
      this.noMore = false;
    },
    refreshData() {
      this.getdata(this.image_url);
    },
    setMore(bool) {
      this.noMore = bool;
    },
    getdata(image_url) {
      this.initData();
      this.image_url = image_url;
      this.getGoods();
    },
    getMoreData() {
      if (this.noMore) return this.$toast("没有更多了");
      this.getGoods();
    },
    getGoods() {
      if(this.loading) return false;
      this.loading = true;
      let json = this.getJson(this.page);
      $http.get("plugin.scan-picture.frontend.modules.goods.controllers.search.index", json).then(({ result, msg, data }) => {
        this.loading = false;
        this.isLoading = false;
        if (result) {
          this.page = json.page;
          this.setMore(this.page == data.goods_list.last_page);
          this.goods = this.goods.concat(data.goods_list.data);
        } else this.$toast(msg);
      })
    }
  }
}
</script>
<style lang="scss" scope>
.scanpicture {
  .full {
    width: 100%;
    height: 100%;
  }

  .scanpicture-url {
    width: 100%;
    height: 24.625rem;
    position: relative;
    $sty: 0.3rem solid #fff;

    .frame {
      position: absolute;
      z-index: 10;
      width: 2.2rem;
      height: 2.2rem;
      box-shadow: 6px;
    }

    .frame-top {
      border-top: $sty;
      border-left: $sty;
      left: 0;
      top: 0;
    }

    .frame-right {
      border-top: $sty;
      border-right: $sty;
      right: 0;
      top: 0;
    }

    .frame-bottom {
      border-bottom: $sty;
      border-right: $sty;
      right: 0;
      bottom: 0;
    }

    .frame-left {
      border-bottom: $sty;
      border-left: $sty;
      bottom: 0;
      left: 0;
    }
  }

  .scanpicture-pic-box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 5rem;
    background: -webkit-linear-gradient(#4f4f4f, #bebdbd);
    background: -o-linear-gradient(#4f4f4f, #bebdbd);
    background: -moz-linear-gradient(#4f4f4f, #bebdbd);
    background: linear-gradient(#4f4f4f, #bebdbd);
    position: relative;

    .arrow-left {
      position: absolute;
      top: 0.5rem;
      left: 0.5rem;
      z-index: 2;
      font-size: 1rem;
      color: #fff;
    }

    .scanpicture-pic {
      width: 3.5rem;
      height: 3.5rem;
      border-radius: 0.4rem;
      border: 1px solid #e64a40;
      overflow: hidden;
    }
  }

  .sort {
    position: relative;
    background-color: #fff;

    .sort-item {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 2rem;
    }

    .sort-top {
      color: #7e7e7e;
      position: relative;

      .van-icon-cross {
        position: absolute;
        right: 1rem;
      }
    }
  }

  .screening {
    width: 18rem;
    min-height: 100vh;
    background: #fff;

    .div4-dd {
      .color {
        color: #f15353 !important;
        background: #fff !important;
        border: solid 0.0625rem #f15353 !important;
      }
    }

    .tabs {
      font-weight: bold;
      font-size: 16px;
      display: block;
      margin: 0.5rem 0.5rem 0 0.5rem;
      text-align: left;

      /* width: 30%; */

      /* background: #f5f5f5; */
      line-height: 1.6875rem;
      border-radius: 0.1875rem;
    }

    #div1 {
      display: flex;
      flex-wrap: wrap;

      div {
        padding-top: 0.625rem;
        width: 25%;

        img {
          display: block;
          width: 4rem;
          height: 4rem;
        }

        span {
          display: inline-block;
          margin-top: 0.625rem;
        }
      }
    }

    .classify {
      display: flex;
      flex-wrap: wrap;
    }

    .m100 {
      width: 100%;
    }

    .divbox1 {
      margin: 0.2rem 0.5rem;

      p {
        display: inline-block;
        font-size: 15px;
        text-align: center;
        line-height: 2rem;

        /* width: 5rem; */
        padding: 0 0.5rem;
        height: 2rem;
        border-radius: 5px;
        position: relative;
        background-color: #eee;

        .none-choose {
          height: 1rem;
          vertical-align: center;
        }

        .img-box {
          display: inline-block;
          width: 0.8rem;
          height: 0.8rem;
          vertical-align: center;
        }
      }

      .chooseFir {
        border: solid 1px #e60012;
        color: #e60012;
        background-color: #fff;
      }

      .box-second {
        display: flex;
        flex-wrap: wrap;
      }

      .divbox2 {
        /* width: 100%; */
        font-size: 15px;
        text-align: center;
        line-height: 2rem;

        /* text-indent: 3.125rem; */
        color: rgba(0, 0, 0, 0.5);

        /* border-bottom: solid 0.0625rem #ebebeb; */
        margin: 0.3rem;

        p {
          /* width: 5rem; */
          height: 2rem;
          position: relative;
        }

        .choose-third {
          border: solid 1px #e60012;
          background-color: #fef5f6;
        }

        .img-box2 {
          display: inline-block;
          width: 0.8rem;
          height: 0.8rem;
          position: absolute;
          right: 0;
          bottom: 0;
        }
      }
    }

    #div2 {
      /* padding-left: 0.875rem; */
      .van-collapse-item__content {
        padding: 0;
      }

      #divbox {
        box-sizing: border-box;

        & > p {
          /* width: 100%; */
          font-size: 15px;
          text-align: left;
          line-height: 2.5rem;
          height: 2.5rem;
          font-weight: bold;

          /* text-indent: 0.625rem; */
          border-bottom: solid 0.0625rem #ebebeb;
          position: relative;
        }
      }

      footer {
        div {
          width: 3.5rem;
          line-height: 1.5rem;
          text-align: center;
          border-radius: 0.1875rem;
          float: left;

          &:nth-of-type(1) {
            border: solid 0.0625rem #f15353;
            background: #f15353;
            color: #fff;
            margin: 1rem 0 0 60%;
          }

          &:nth-of-type(2) {
            border: solid 0.0625rem #f15353;
            color: #f15353;
            background: #fff;
            margin: 1rem 0 0 5%;
          }
        }
      }
    }

    #div3 {
      box-sizing: border-box;
      padding-left: 0.875rem;

      p {
        font-size: 15px;
        text-align: left;
        line-height: 2.5rem;
        height: 2.5rem;

        /* text-indent: 0.625rem; */
        border-bottom: solid 0.0625rem #ebebeb;
        position: relative;
        display: flex;

        .title {
          flex: 1;
        }

        .choose {
          flex: 0 0 2rem;
        }

        .img-box {
          display: inline-block;
          width: 0.8rem;
          height: 0.8rem;
        }

        /* span {
          position: absolute;
          right: 1rem;
          top: 1rem;
          display: block;
          width: 1.25rem;
          height: 0.625rem;
          border: solid 0.1875rem #f15353;
          border-top: transparent;
          border-right: transparent;
          transform: rotate(-45deg);
        } */
      }

      div {
        width: 3.5rem;
        line-height: 1.5rem;
        text-align: center;
        border-radius: 0.1875rem;
        float: left;

        &:nth-of-type(1) {
          border: solid 0.0625rem #f15353;
          background: #f15353;
          color: #fff;
          margin: 1rem 0 0 60%;
        }

        &:nth-of-type(2) {
          border: solid 0.0625rem #f15353;
          color: #f15353;
          background: #fff;
          margin: 1rem 0 0 5%;
        }
      }
    }

    #div4 {
      dl {
        box-sizing: border-box;
        padding: 0 0.875rem;
        font-size: 15px;

        dt {
          text-align: left;
          line-height: 2.5rem;
          text-indent: 0.9375rem;
          font-weight: bold;

          span {
            float: right;
            font-size: 13px;
            color: #c9c9c9;
            font-weight: normal;

            .icon {
              width: 0.4375rem;
              height: 0.4375rem;
              margin: 0.9375rem 0.9375rem 0 0.3125rem;
              border: solid 0.0625rem #c9c9c9;
              border-left: transparent;
              border-top: transparent;
              transform: rotate(45deg);
            }

            .icon1 {
              width: 0.4375rem;
              height: 0.4375rem;
              margin: 0.9375rem 0.9375rem 0 0.3125rem;
              border: solid 0.0625rem #c9c9c9;
              border-left: transparent;
              border-top: transparent;
              transform: rotate(225deg);
            }
          }
        }

        dd {
          display: flex;
          flex-wrap: wrap;
          overflow: hidden;
          border-bottom: solid 0.0625rem #ebebeb;

          span {
            display: block;
            background: #f5f5f5;
            width: 4.9375rem;
            line-height: 1.875rem;
            height: 1.875rem;
            float: left;
            margin: 0 0.625rem 0.75rem 0;
            border-radius: 0.1875rem;
            padding: 0 0.125rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          span:nth-child(4n) {
            margin-right: 0;
          }
        }
      }
    }

    .button {
      width: 100%;
      height: 3rem;
      line-height: 2rem;
      display: flex;
      background: #fff;
      padding: 0 0.5rem 0.5rem 0;

      div {
        width: 3.5rem;
        line-height: 2rem;
        text-align: center;
        border-radius: 0.1875rem;

        &:nth-of-type(1) {
          border: solid 0.0625rem #f15353;
          background: #f15353;
          color: #fff;
          margin: 0.5rem 0 0 50%;
        }

        &:nth-of-type(2) {
          border: solid 0.0625rem #f15353;
          color: #f15353;
          background: #fff;
          margin: 0.5rem 0 0 5%;
        }
      }

      .btn {
        flex: 1;
      }
    }
  }
}
</style>